<template>
	<view>
		<pageHeader  @back='back' :fixed='true' :border='true'>
			<text>商家合作</text>
			<text  class="toApply" slot="right" @tap="toLookSm">合作说明</text>
		</pageHeader>
		<view style="height:16rpx;background-color:#F5F5F5;"></view>
		<view class="title" >
			<text class="title_word">联系人信息</text>
		</view>
		<view class="message">
			<text class="important">*</text>
			<view class="key">姓名</view>
			<input type="text" placeholder="请填写姓名" placeholder-style="color:#999999" v-model.trim="name"  :maxlength='8'/>
		</view>
		<view class="message">
			<text class="important">*</text>
			<view class="key">手机</view>
			<input type="number" placeholder="请填写手机号码" placeholder-style="color:#999999" :maxlength='11' v-model='phone' @blur='toCheckError($event,"phone")' @focus='phoneError = false'/>
			<image src="/static/svg/gantnhao.svg" mode="" class="gantanhao" v-if="phoneError"></image>
		</view>
		<view class="message">
			<text class="important">*</text>
			<view class="key">固定电话</view>
			<input type="text" placeholder="请填写固定电话,区号+电话号码" placeholder-style="color:#999999" :maxlength='15' @blur='toCheckError($event,"fixedTelephone")' @focus='fixedTelephoneError = false' v-model='fixedTelephone'/>
			<image src="/static/svg/gantnhao.svg" mode="" class="gantanhao" v-if="fixedTelephoneError"></image>
		</view>
		<view class="message">
			<text class="important">*</text>
			<view class="key">电子邮箱</view>
			<input type="text" placeholder="请填写电子邮箱" placeholder-style="color:#999999" :maxlength='50' @blur='toCheckError($event,"email")' @focus='emailError = false' v-model.trim="email"/>
			<image src="/static/svg/gantnhao.svg" mode="" class="gantanhao" v-if="emailError"></image>
		</view>
		<view class="title" style="margin-top: 10rpx">
			<text class="title_word">公司信息</text>
		</view>
		<view class="message">
			<text class="important">*</text>
			<view class="key">品牌名</view>
			<input type="text" placeholder="请填写品牌名" placeholder-style="color:#999999" v-model.trim="brand"  :maxlength='20'/>
		</view>
		<view class="message">
			<text class="important">*</text>
			<view class="key">公司名称</view>
			<input type="text" placeholder="请填写公司名称" placeholder-style="color:#999999" v-model.trim="companyName"  :maxlength='20'/>
		</view>
		<view class="message">
			<text class="important">*</text>
			<view class="key">公司地址</view>
			<addressPicker @pickerConfirm='changeAddress'>
				<view class="value" v-if="officeAddress.fullPath" style="color: #333333">{{officeAddress.fullPath}}</view>
				<view class="value" v-else>请选择省市区</view>
				<image src="/static/svg/moreandmore.svg" class="more"></image>
			</addressPicker>	
		</view>
		<view class="message">
			<input type="text" placeholder="请填写公司详细地址" placeholder-style="color:#999999" :maxlength='50'  v-model.trim="officeDetailedAddress"/>
		</view>
		<view class="message">
			<text class="important">*</text>
			<view class="key">经营范围</view>
			<input type="text" placeholder="请填写经营范围,如:红木家具" placeholder-style="color:#999999" v-model.trim="scope"  :maxlength='50'/>
		</view>
		<view class="message">
			<text class="important">*</text>
			<view class="key" style="width: 6.4em">合作产品说明</view>
		</view>
		<view class="textarea">
			<textarea placeholder="请填写公司主要产品线和优势产品" placeholder-style="color:#999999" :maxlength='100' v-model.trim="productDescription"></textarea>
			<text>{{productDescription.length}}/100</text>
		</view>
		<view class="title" style="margin-top: 10rpx">
			<text>*</text>
			<text class="title_word">上传营业执照</text>
		</view>
		<view class="message">
			<view class="key" style="width: 6.4em">营业执照编号</view>
			<input type="text" placeholder="请填写社会统一信用代码" placeholder-style="color:#999999" :maxlength='-1'  v-model.trim="license" style="left:272rpx ;"/>
		</view>
		<view class="addImg">
			<text class="addimg_title">上传营业执照</text>
			<view class="IDCard">
				<view v-if="!businessLicense">
					<image src="/static/svg/zhizhao.svg"   @tap="toAddImg" data-type='license'></image>
				</view>
				<imgDele :src="businessLicense" mode="aspectFill" @imgTap='licenseTap' @deleSuccess='deleLicense' v-else></imgDele>
			</view>
		</view>
		<view class="addImg">
			<text class="addimg_title">上传法人身份证（正反两面）</text>
			<view class="IDCard">
				<view v-if="!frontOfIDCard">
					<image src="/static/svg/zhengmian.svg"   @tap="toAddImg" data-type='front'></image>
				</view>
				<imgDele :src="frontOfIDCard" mode="aspectFill" @imgTap='frontOfIDCardTap' @deleSuccess='deleFrontOfIDCard' v-else></imgDele>
				<view  v-if="!backOfIDCard">
					<image src="/static/svg/fanmian.svg"  @tap="toAddImg" data-type='back'></image>
				</view>
				<imgDele :src="backOfIDCard" mode="aspectFill" @imgTap='backOfIDCardTap' @deleSuccess='deleBackOfIDCard' v-else></imgDele>
			</view>
		</view>
		<view class="addImg">
			<text class="addimg_title">企业logo</text>
			<view class="IDCard">
				<view v-if="!logo">
					<image src="/static/svg/qiyelogo.svg"   @tap="toAddImg" data-type='logo'></image>
				</view>
				<imgDele :src="logo" mode="aspectFill" @imgTap='logoTap' @deleSuccess='deleLogo' v-else></imgDele>
			</view>
		</view>
		<view class="opinion" >
			<view :class="{isAgree:isAgree}" @tap="isAgree=!isAgree"></view>
			<text>我已同意<text class="xieyi"  @tap="toHaveLook">《商家入驻协议》</text></text>
		</view>
		<view class="button" :style="{backgroundColor:canSubmit?'':'#C8C8C8'}" @tap="toSubmit">
			<text>提 交</text>
		</view>
		<view style="height: 117rpx;"></view>
		<ImageCropper :src="url" @confirm="confirm" :crop-fixed="true" @cancel="cancel" :cropWidth='268' :cropHeight='165'></ImageCropper>
		<picturePreview :list='imgList' :index='imgIndex' v-if='showPreview'  @confirm='deleSuccess' @cancel='cancelPreview'/>
	</view>
</template>

<script>
	import url from '@/common/util/personal.js'
	import addressPicker from '@/components/address-pick/address-pick.vue'
	import pageHeader from "@/components/header/header.vue"
	import imgDele from "@/components/dele/imgDele.vue"
	import picturePreview from "@/components/picturePreview/picturePreview.vue"
	import ImageCropper from "@/components/invinbg-image-cropper/invinbg-image-cropper.vue"
	export default {
		components: {pageHeader,addressPicker,imgDele,ImageCropper,picturePreview},
		data() {
			return {
				userId:localStorage.getItem("userId"),
				name:"",
				phone:"",
				fixedTelephone:"",
				email:"",
				brand:"",
				companyName:"",
				officeDetailedAddress:"",
				scope:"",
				officeAddress:{},
				productDescription:"",
				license:"",
				isAgree:false,
				canSubmit:false,
				businessLicense:"",
				frontOfIDCard:"",
				backOfIDCard:"",
				logo:"",
				imgList:[],
				imgIndex:0,
				showPreview:false,
				tapImg:"",
				url:"",
				phoneError:false,
				fixedTelephoneError:false,
				emailError:false
			};
		},
		watch:{
			name(){
				this.checkCan()
			},
			phone(){
				this.checkCan()
			},
			fixedTelephone(){
				this.checkCan()
			},
			email(){
				this.checkCan()
			},
			brand(){
				this.checkCan()
			},
			companyName(){
				this.checkCan()
			},
			officeDetailedAddress(){
				this.checkCan()
			},
			scope(){
				this.checkCan()
			},
			productDescription(){
				this.checkCan()
			},
			license(){
				this.checkCan()
			},
			isAgree(){
				this.checkCan()
			},
			businessLicense(){
				this.checkCan()
			},
			frontOfIDCard(){
				this.checkCan()
			},
			backOfIDCard(){
				this.checkCan()
			},
			logo(){
				this.checkCan()
			}
		},
		methods: {
			back() {
				uni.showModal({
					content: '是否放弃当前操作？',
					cancelText:'否',
					confirmText:'是',
					success:res=> {
						if (res.confirm) {
							uni.navigateBack({
								delta: 1
							})
						}
					}
				})
			},
			checkCan(){
				let can=true
				if(!/^0\d{2,3}-?\d{7,8}$/.test(this.fixedTelephone)){
					can=false
				}
				if(!this.name){
					can=false
				}
				if(!/^1[0-9]{10}$/.test(this.phone)){
					can=false
				}
				if(!/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(this.email)){
					can=false
				}
				if(!this.brand){
					can=false
				}
				if(!this.companyName){
					can=false
				}
				if(!this.officeAddress.fullPath){
					can=false
				}
				if(!this.officeDetailedAddress){
					can=false
				}
				if(!this.scope){
					can=false
				}
				if(!this.productDescription){
					can=false
				}
				if(!this.license){
					can=false
				}
				if(!this.isAgree){
					can=false
				}
				if(!this.businessLicense){
					can=false
				}
				if(!this.frontOfIDCard){
					can=false
				}
				if(!this.backOfIDCard){
					can=false
				}
				if(!this.logo){
					can=false
				}
				this.canSubmit=can
			},
			changeAddress(e){
				this.officeAddress=e
				this.checkCan()
			},
			toHaveLook(){
				uni.navigateTo({
					url: '/pages/personal/storeAgreement'
				})
			},
			toLookSm(){
				uni.navigateTo({
					url: '/pages/personal/storeTogether?noButton=false'
				})
				
			},
			toCheckError(e,type){
				switch (type){
					case 'phone':
						if(this.phone){
							if(!/^1[0-9]{10}$/.test(this.phone)){
								this.phoneError=true
							}else{
								this.phoneError=false
							}
						}else{
							this.phoneError=false
						}
						break;
					case 'email':
						if(this.email){
							if(!/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(this.email)){
								this.emailError=true
							}else{
								this.emailError=false
							}
						}else{
							this.emailError=false
						}
						break;	
					case 'fixedTelephone':
						if(this.fixedTelephone){
							if(!/^0\d{2,3}-?\d{7,8}$/.test(this.fixedTelephone)){
								this.fixedTelephoneError=true
							}else{
								this.fixedTelephoneError=false
							}
						}else{
							this.fixedTelephoneError=false
						}
						break;	
					default:
						break;
				}
			},
			frontOfIDCardTap(){
				this.imgList.push(this.frontOfIDCard)
				if(this.backOfIDCard){
					this.imgList.push(this.backOfIDCard)
				}
				this.imgIndex=0
				this.showPreview=true
			},
			backOfIDCardTap(){
				this.imgList.push(this.backOfIDCard)
				if(this.frontOfIDCard){
					this.imgList.unshift(this.frontOfIDCard)
					this.imgIndex=1
				}else{
					this.imgIndex=0
				}
				this.showPreview=true
			},
			licenseTap(){
				this.imgList.push(this.businessLicense)
				this.imgIndex=0
				this.tapImg='businessLicense'
				this.showPreview=true
			},
			logoTap(){
				this.imgList.push(this.logo)
				this.imgIndex=0
				this.tapImg='logo'
				this.showPreview=true
			},
			deleSuccess(index){
				if(this.tapImg=='businessLicense'){
					this.deleLicense()
					this.cancelPreview()
					return
				}
				if(this.tapImg=='logo'){
					this.deleLogo()
					this.cancelPreview()
					return
				}
				if(this.frontOfIDCard&&this.backOfIDCard){
					if(index==1){
						this.deleBackOfIDCard()
						this.imgIndex=0
						this.imgList.splice(1,1)
					}else{
						this.deleFrontOfIDCard()
						this.imgList.splice(0,1)
					}
				}else if(this.backOfIDCard){
					this.deleBackOfIDCard()
					this.cancelPreview()
				}else if(this.frontOfIDCard){
					this.deleFrontOfIDCard()
					this.cancelPreview()
				}
			},
			cancelPreview(){
				this.imgList=[]
				this.tapImg=''
				this.showPreview=false
			},
			deleFrontOfIDCard(){
				this.frontOfIDCard=''
			},
			deleBackOfIDCard(){
				this.backOfIDCard=''
			},
			deleLicense(){
				this.businessLicense=''
			},
			deleLogo(){
				this.logo=''
			},
			toAddImg(e){
				switch (e.currentTarget.dataset.type){
					case 'front':
						this.chooseType='frontOfIDCard'
						break;	
					case 'back':
						this.chooseType='backOfIDCard'
						break;	
					case 'license':
						this.chooseType='businessLicense'
						break;	
					case 'logo':
						this.chooseType='logo'
						break;				
					default:
						break;
				}
				uni.chooseImage({
					count:1,
					sizeType: ['compressed', 'original'],
					sourceType: ['album', 'camera'],
				    success: (res) => {
				        // 设置url的值，显示控件
				        this.url = res.tempFilePaths[0];
				    }
				})
			},
			confirm(e) {
				uni.showLoading({
				    title: '上传中...',
				})
				this.url = ''
				uni.uploadFile({
				    url: 'http://classic.wljiam.com/caapi/card/insertreminder',
				    filePath: e.detail.tempFilePath,
				    name: 'file',
				    formData: {
				        'userId': 1
				    },
					success: (uploadFileRes) => {
						uni.hideLoading()
						this[this.chooseType]=JSON.parse(uploadFileRes.data).data
				    }
				})
			},
			cancel(){
				this.url = ''
			},
			async toSubmit(){
				if(!this.canSubmit){
					return
				}
				let data={}
				data.userId=this.userId
				data.name=this.name
				data.mobilePhone=this.phone
				data.fixedTelephone=this.fixedTelephone
				data.email=this.email
				data.brand=this.brand
				data.companyName=this.companyName
				data.companyAddress=this.officeAddress.fullPath+this.officeDetailedAddress
				data.businessScope=this.scope
				data.cooperationDescription=this.productDescription
				data.licenseNumber=this.license
				data.licensePicture=this.businessLicense
				data.identityCardFace=this.frontOfIDCard
				data.identityCardBack=this.backOfIDCard
				data.logo=this.logo
				let res=await url.applyMerchant(data)
				if(res.code==0){
					uni.redirectTo({
						url: '/pages/personal/submitSucess?is=isStore'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
.toApply{
	font-size: 34rpx;
	color:#333333 ;
	line-height: 34rpx;
	letter-spacing: 1rpx;
	margin-right: 30rpx;
}
page{
	background-color: #FFFFFF;
}
.title{
	padding-top: 4rpx;
	display: flex;
	align-items: center;
	height: 84rpx;
	padding-left: 30rpx;
	margin-bottom: 10rpx;
	text{
		position: relative;
		font-size: 32rpx;
		letter-spacing: 1rpx;
		color: #333333;
		line-height: 32rpx;
		font-weight: bold;
	}
}
.title>text:not(.title_word){
	color:#C84739 ;
}
.title>.title_word::after{
	content: "";
	display: block;
	height: 6rpx;
	width: 34rpx;
	border-radius: 5rpx;
	background-color:#333333 ;
	position: absolute;
	left: 0rpx;
	bottom: -16rpx;
}
.message{
	display: flex;
	align-items: center;
	padding: 30rpx 30rpx;
	border-bottom: 1rpx solid #EEEEEE;
	position: relative;
	min-height: 102rpx;
	.important{
		font-size:30rpx ;
		letter-spacing: 1rpx;
		line-height: 30rpx;
		color: #C84739;
		position: absolute;
		left: 30rpx;
	}
	.key{
		font-size:30rpx ;
		letter-spacing: 1rpx;
		line-height: 44rpx;
		color: #333333;
		position: absolute;
		left: 46rpx;
		width:128rpx;
		display: block;
		text-align: justify;
		height: 44rpx;
	}
	.value{
		display: flex;
		align-items: center;
		font-size: 30rpx;
		letter-spacing: 1rpx;
		color: #999999;
		line-height: 44rpx;
		min-height: 44rpx;
		width: 477rpx;
		margin-left: 179rpx;
	}
	.defaultHead{
		height: 86rpx;
		width: 86rpx;
		position: absolute;
		display: block;
		right: 64rpx;
		border-radius: 50%;
	}
	.more{
		height: 24rpx;
		width: 24rpx;
		position: absolute;
		display: block;
		right: 30rpx;
		top: 50%;
		margin-top:-12rpx;
	}
	input{
		width:450rpx ;
		font-size: 30rpx;
		height: 44rpx;
		letter-spacing: 1rpx;
		position: absolute;
		left: 211rpx;
		color: #333333;
	}
	.sex{
		position: absolute;
		left: 250rpx;
		width: 300rpx;
		height: 100%;
		display: flex;
		justify-content: space-between;
		.man{
			height: 100%;
			display: flex;
			align-items: center;
			view{
				height: 16rpx;
				width: 16rpx;
				background-color:#EEEEEE ;
				border: 1rpx solid #999999;
				border-radius: 50%;
			}
			text{
				font-size:30rpx ;
				letter-spacing: 1rpx;
				color:#333333 ;
				line-height: 30rpx;
				margin-left: 12rpx;
			}
		}
		.sex_active{
			view{
				background-color:#C84739 ;
				border-color: #7F1509;
			}
		}
	}
}
.message>view{
	height: 100%;
}
.message>view>view{
	height: 100%;
}
.message>view>view>view{
	height: 100%;
}
.head{
	height: 126rpx;
}
.key::after{
	content: "";
	display: inline-block;
	width: 100%;
	height: 0;
	font-size: 0;
	line-height: 0;
}
.IDCard{
	margin-top:40rpx ;
	margin-bottom: 36rpx;
	display: flex;
	view{
		margin: 0 30rpx;
		height: 137rpx;
		width: 223rpx;
		border-radius: 10rpx;
		/deep/image{
			height: 100%;
			width: 100%;
			border-radius: 10rpx;
			display: block;
		}
	}
}
.textarea{
	height: 330rpx;
	border-bottom: 1rpx solid #EEEEEE;
	padding: 22rpx 30rpx;
	padding-bottom: 50rpx;
	position: relative;
	textarea{
		height: 100%;
		width: 100%;
		font-size: 30rpx;
		letter-spacing: 1rpx;
		color: #333333;
		text-align: justify;
	}
	text{
		font-size:26rpx ;
		color: #999999;
		letter-spacing: 1rpx;
		line-height: 26rpx;
		position: absolute;
		bottom: 30rpx;
		right: 30rpx;
	}
}
.opinion{
	display: flex;
	align-items: center;
	padding-left: 30rpx;
	margin-top:70rpx ;
	view{
		height:42rpx ;
		width: 42rpx;
		border-radius: 50%;
		border: 2rpx solid #DDDDDD;
	}
	text{
		font-size: 26rpx;
		color: #333333;
		letter-spacing: 1rpx;
		line-height: 26rpx;
		margin-left: 10rpx;
	}
	.xieyi{
		color:#549AEC;
		position: relative;
		margin-left: 0;
	}
}
.isAgree{
	background-image: url('/static/svg/isChoose.svg');
	background-position: 0 0 ;
	background-repeat: no-repeat;
	background-size: 100%;
	border: 0 !important;
}
.opinion>.xieyi::after{
	content: "";
	display: block;
	height: 1px;
	transform: scaleY(0.5);
	background-color: #549AEC;
	width: 97.037%;
	position: absolute;
	left: 0;
	bottom: -8rpx;
}
.button{
	height: 90rpx;
	width: 590rpx;
	margin: 128rpx auto 0rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color:#C84739 ;
	border-radius: 45rpx;
	text{
		white-space: pre;
		font-size:34rpx ;
		letter-spacing: 1rpx;
		color: #FFFAEB;
		line-height: 34rpx;
		
	}
}
.addImg{
	padding-top:36rpx;
	border-bottom: 1rpx solid #EEEEEE;
	.addimg_title{
		display: block;
		font-size: 30rpx;
		line-height: 30rpx;
		height: 30rpx;
		letter-spacing: 1rpx;
		color:#333333 ;
		position: relative;
		left: 44rpx;
	}
}
.gantanhao{
	height: 32rpx;
	width: 32rpx;
	position: absolute;
	right: 30rpx;
}
</style>
